<template>
  <div>
    <component
      :is="getComponent(item.type, item.component, item.widget)"
      v-bind="vBind"
      :multiple="false"
      :placeholder="item.placeholder || getPlaceholder(item)"
      :value="['timerange', 'checkbox'].includes(item.type) ? item.dicData : undefined"
    >
      <span v-if="params.html" v-html="params.html"></span>
      <span v-else-if="item.params && item.params.html" v-html="item.params.html"></span>
    </component>
  </div>
</template>
<script>
export default {
  name: 'WidgetFormItem',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {}
    }
  },
  computed: {
    vBind() {
      const vBind = Object.assign(this.deepClone(this.item), this.params, {
        size: this.item.size || 'default',
        dic: this.item.dicData
          ? this.item.dicData.map((d) => {
              if (!this.item.props) return d
              const { label, value, desc } = this.item.props
              if (!label || !value) return d
              return {
                [label]: d.label,
                [value]: d.value,
                [desc]: d.desc
              }
            })
          : undefined,
        rules: this.item.pattern
          ? this.item.rules.map((r) => {
              if (r.pattern) r.pattern = new RegExp(this.item.pattern)
              return r
            })
          : this.item.rules
      })
      let event = ['change', 'blur', 'click', 'focus', 'control', 'appendClick', 'uploadAfter']
      event.forEach((e) => delete vBind[e])
      if (vBind.event) delete vBind.event
      // 避免样式污染
      if (vBind.className) delete vBind.className
      return vBind
    }
  },
  methods: {
    getComponent(type, component, widget) {
      // debugger

      let KEY_COMPONENT_NAME = 'avue-'
      let result = 'input'
      if (component) return component
      else if (['array', 'img', 'url'].includes(type)) result = 'array'
      else if (type === 'select') result = 'select'
      else if (type === 'selects') result = 'select'
      else if (type === 'radio') result = 'radio'
      else if (type === 'checkbox') result = 'checkbox'
      else if (['time', 'timerange'].includes(type)) result = 'time'
      else if (
        [
          'dates',
          'date',
          'datetime',
          'datetimerange',
          'daterange',
          'week',
          'month',
          'year'
        ].includes(type)
      )
        result = 'date'
      else if (type === 'cascader') result = 'cascader'
      else if (type === 'number') result = 'input-number'
      else if (type === 'counter') result = 'input-number'
      else if (type === 'password') result = 'input'
      else if (type === 'switch') result = 'switch'
      else if (type === 'rate') result = 'rate'
      else if (type === 'upload') result = 'upload'
      else if (type === 'slider') result = 'slider'
      else if (type === 'dynamic') result = 'dynamic'
      else if (type === 'icon') result = 'input-icon'
      else if (type === 'color') result = 'input-color'
      else if (type === 'map') result = 'input-map'
      else if (type === 'primary') result = 'primary'
      else if (type === 'text') result = 'text'

      return widget ? type : KEY_COMPONENT_NAME + result
    },
    getPlaceholder(item) {
      const label = item.label ? item.label : ''
      if (
        [
          'select',
          'selects',
          'checkbox',
          'radio',
          'tree',
          'color',
          'dates',
          'date',
          'datetime',
          'datetimerange',
          'daterange',
          'week',
          'month',
          'year',
          'map',
          'icon'
        ].includes(item.type)
      )
        return `请选择 ${label}`
      else return `请输入 ${label}`
    }
  }
}
</script>
